<template>
	<view class="page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left">
					<image src="../../../../static/images/common/fanhui.png"></image>
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<image class="plug" src="../../../../static/images/common/left.png"></image>
			<view class="tv">
				<image class="bofang" src="../../../../static/images/common/bofang.png"></image>
				<view class="function-list flex-center">
					<view class="flex-align-center flex1 play-mode-box">
						<span class="play-mode">播放模式</span>
						<zb-popover placement="top" ref="Popover1" @handleClick="handleClick" @select="handleSelect"
							class="item-popover">
							<span class="play-mode-de flex-center">
								<span style="margin-right: 5rpx;">字母预览-人教版</span>
								<!-- <u-icon name="arrow-up-fill" color="#fff" size="10"></u-icon> -->
								<u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon>
							</span>
							<view class="select-box" slot="content" :data-isNotClose="1">
								<view class="left" :data-isNotClose="1">
									<view class="left-item" :data-isNotClose="1"
										:class="index === currentValue ? 'active':''" v-for="(item,index) in actions"
										:key="index">
										{{item.text}}
									</view>
								</view>
								<view class="line" :data-isNotClose="1"></view>
								<view class="right">
									<view class="left-item" :class="index === currentValue ? 'active':''"
										v-for="(item,index) in rightList" :key="index">
										{{item.text}}
									</view>
								</view>
							</view>
						</zb-popover>
					</view>
					<view class="flex-align-center flex1 begain-btn-box">
						<image src="../../../../static/images/common/qianjin.png" class="before-btn"></image>
						<image src="../../../../static/images/common/qianjin.png" class="begain-btn"></image>
						<image src="../../../../static/images/common/qianjin.png" class="before-btn"></image>
					</view>
					<view class="flex-align-center flex1 speed-box">
						<view class="speed flex-center">
							1
						</view>
						<view class="speed flex-center" style="margin-left: 41rpx;">
							快
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentValue: 0,
				actions: [{
						text: '字母浏览-人教版'
					},
					{
						text: '字母浏览-译林版'
					},
					{
						text: '字母听写'
					},
				],
				rightList: [{
					text: '带娃打完'
				}]
			};
		},
		methods: {
			handleClick() {

			},
			handleSelect() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background-image: url('../../../../static/images/common/player-bj.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}

	.u-nav-slot {
		image {
			width: px_2_vw(63);
			height: px_2_vw(63);
		}
	}

	.content {
		display: flex;
		align-items: end;
		flex: 1;
		position: relative;
		padding: 37rpx;

		.plug {
			width: px_2_vw(268);
			height: px_2_vw(219);
			margin-bottom: 400rpx;


		}

		.tv {
			width: px_2_vw(1300);
			height: 100%;
			background-size: 100% 100%;
			background-image: url('../../../../static/images/common/payer-center.png');
			margin-left: -2rpx;
			position: relative;

			.bofang {
				width: px_2_vw(120);
				height: px_2_vw(120);
				position: absolute;
				top: 42%;
				left: 50%;
				transform: translate(-50%, -50%);
				// width: 100%;
			}

			.function-list {
				position: absolute;
				bottom: 20%;
				width: 100%;
				// justify-content: space-around;

			}

			.play-mode-box {
				position: absolute;
				left: 100rpx;
			}

			.play-mode {
				font-size: px_2_vw(30);
				color: #95BCF5;
			}

			.play-mode-de {
				padding: 0 15rpx;
				background: #09408F;
				border-radius: 25rpx;
				// width: px_2_vw(183);
				height: px_2_vw(41);
				color: #fff;
				font-size: px_2_vw(20);
				margin-left: 8rpx;

			}

			.before-btn {
				width: px_2_vw(81);
				height: px_2_vw(76);
			}

			.begain-btn {
				width: px_2_vw(103);
				height: px_2_vw(106);
				margin: 0 47rpx;
			}

			.speed {
				width: px_2_vw(53);
				height: px_2_vw(53);
				background-size: 100% 100%;
				background-image: url('../../../../static/images/common/beisu.png');
				color: #6E90D5;
				font-size: 20rpx;
			}

			.begain-btn-box {
				position: absolute;
			}

			.speed-box {
				position: absolute;
				right: 192rpx;
			}

			.select-box {
				width: px_2_vw(385);
				height: px_2_vw(335);
				background: rgba(2, 52, 153, 1);
				border: 2rpx solid rgba(140, 194, 255, 1);
				border-radius: 22rpx;
				color: #fff;
				font-size: px_2_vw(20);
				padding: 25rpx;
				display: flex;

				.left {
					overflow-y: auto;
					height: px_2_vw(300);
				}

				.line {
					border-right: 1rpx solid #3CAFE1;
					margin: 0 11rpx;
				}

				.left-item {
					// width: px_2_vw(160);
					height: px_2_vw(53);
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					padding: 10rpx;

				}

				.right {
					overflow-y: auto;
					height: px_2_vw(300);
				}

				.active {
					color: #002061 !important;
					background: #3CAFE1;
				}
			}
		}
	}
</style>